<template>
  <div class="home">
    <div class="body">
      <div class="content">
        <div id="nswy">
          <div id="cpdd">
            <a-avatar
              :size="54"
              style="margin-right: 10px"
              :src="contents.headImg"
            />
            <div>
              <div style="margin-bottom: 5px">
                <span id="Username" @click="gotoUserPage()">
                  {{ contents.name }}
                </span>
              </div>
              <div style="font-size: 10px">
                <span style="margin-right: 10px">{{ contents.addtime }}</span>
              </div>
            </div>
          </div>
          <a-button type="primary" ghost @click="doFollow"> 关注 </a-button>
        </div>
        <div>
          <span v-html="contents.content"></span>
          <div id="picstyle">
            <span
              v-for="(pics, index) in contents.picList"
              :key="index"
              style="margin: 5px 10px 5px 0"
            >
              <a-image :width="260" :src="pics.url" />
            </span>
          </div>
        </div>
        <a-divider style="border-color: #191970" dashed />
        <div id="commitInput">
          <a-textarea
            v-model:value="comment"
            placeholder="写下你的评论……"
            :rows="4"
            style="background: #e6e6fa"
          />
          <div style="margin-left: 10px">
            <a-button
              type="primary"
              ghost
              @click="commitSubmit"
              style="margin-bottom: 10px"
              :disabled="comment === ''"
            >
              提交
            </a-button>
            <a-button type="primary" ghost @click="commitCancel">
              取消
            </a-button>
          </div>
        </div>
        <a-comment v-for="(item, index) in commentList" :key="index">
          <template #actions>
            <span style="margin-right: 10px">
              <LikeOutlined @click="like" />
              <span style="padding-left: 8px; cursor: auto">
                {{ item.clikes }}
              </span>
            </span>
            <span @click="reply">回复</span>
          </template>
          <template #author>
            <a @click="gotoUserPage(item)">
              {{ item.cname }}
            </a>
          </template>
          <template #avatar>
            <a-avatar :src="item.cimgHead" />
          </template>
          <template #content>
            <p>{{ item.ccontent }}</p>
          </template>
          <template #datetime>
            <span>{{ item.caddtime }}</span>
          </template>
        </a-comment>
      </div>
      <div class="sider">
        <li>博主信息</li>
        <li>广告位</li>
        <li>推荐位</li>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { showContent2 } from "../../api/showPage";
import { useRouter } from "vue-router";
import { doFollows } from "../../api/users";
import { message } from "ant-design-vue";
import { LikeOutlined } from "@ant-design/icons-vue";
import { doCommit } from "../../api/dynamic";
import { formatTime } from "../../utils/date";

export default defineComponent({
  setup() {
    const router = useRouter();
    const contents = reactive({
      did: "",
      uid: "",
      name: "",
      headImg: "",
      addtime: "",
      content: "",
      picList: [],
    });
    const commentList = ref();
    const comment = ref("");
    const likes = ref(0);

    const commitSubmit = () => {
      let dateNow = formatTime();
      doCommit({
        url: "/dynamic/doCommit",
        did: contents.did,
        comment: comment.value,
        addTime: dateNow,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
          location.reload();
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    const commitCancel = () => {
      comment.value = "";
    };

    const like = () => {
      likes.value = 1;
    };

    const reply = () => {
      message.info("暂未开发");
    };

    const gotoUserPage = (item) => {
      // console.log(item.author);
      if (!item) {
        sessionStorage.setItem("username", contents.name);
        router.push({ path: "/user" });
      } else {
        sessionStorage.setItem("username", item.cname);
        router.push({ path: "/user" });
      }
    };

    const doFollow = () => {
      doFollows({
        url: "/users/doFollows",
        userid: contents.uid,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    showContent2({
      url: "/showPage/showContent2",
      did: sessionStorage.getItem("DID"),
      success: (res) => {
        // console.log(res.data);
        contents.did = sessionStorage.getItem("DID");
        contents.uid = res.data.uid;
        contents.name = res.data.name;
        contents.headImg = "http://localhost:3000/" + res.data.headImg;
        contents.addtime = res.data.addtime;
        contents.content = res.data.content;
        contents.picList = res.data.picList;
        commentList.value = res.data.commentList;
        // console.log(commentList.value);
      },
      err: (err) => {
        console.log(err);
      },
    });

    return {
      contents,
      doFollow,
      gotoUserPage,
      likes,
      like,
      comment,
      reply,
      commitSubmit,
      commitCancel,
      commentList,
    };
  },
  components: {
    LikeOutlined,
  },
});
</script>

<style scoped>
.home {
  min-height: 630px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f1fffd;
}
.body {
  min-height: 630px;
  width: 66%;
  padding-top: 20px;
  margin: 0 17% 0 17%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.content {
  height: auto;
  width: 70%;
  padding: 20px 20px 0 20px;
  margin: 0;
  min-width: 530px;
  background: #edf9ff;
}
.sider {
  height: auto;
  width: 30%;
  padding: 20px 20px 0 20px;
  margin: 0 0 0 10px;
  min-width: 200px;
  background: #edf9ff;
}
#nswy {
  height: 60px;
  margin: 0 30px 30px 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#cpdd {
  height: auto;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#commitInput {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#picstyle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
#Username:hover {
  color: #005177;
  cursor: pointer;
}
</style>